<%@ page import="org.xilin.Course" %>

<g:setProvider library="jquery"/>
<g:javascript library="prototype" />
<g:if test="${flash.message}">
  <div class="message">${flash.message}</div>
</g:if>
<g:form name="registerClass" >
  Foe student: <input type="text" name="studentId" readOnly="true" value="${params.studentId}"/>
<table id="courseTable" class="tablesorter">
    <thead>
        <tr>

            <th class="delete">Del</th>
            <th class="edit">Edit</th>
            <th>${message(code: 'course.name.label', default: 'Name')}</th>
            <th>${message(code: 'course.grade.label', default: 'Grade')}</th>
            <th>${message(code: 'course.capacity.label', default: 'Capacity')}</th>
            <th>${message(code: 'course.regCapacity.label', default: 'Reg Cap.')}</th>
            <th>${message(code: 'course.price.label', default: 'Price')}</th>
            <th>${message(code: 'course.startTime.label', default: 'Start Time')}</th>
            <th>${message(code: 'course.endTime.label', default: 'End Time')}</th>
            <th>${message(code: 'course.teacher.label', default: 'Teacher')}</th>
            <th>${message(code: 'course.book.label', default: 'Book')}</th>
            <th>${message(code: 'course.roomNo.label', default: 'Room')}</th>
            <th>${message(code: 'course.semester.label', default: 'Semester')}</th>
            <th>${message(code: 'course.year.label', default: 'Year')}</th>
            <th>${message(code: 'course.status.label', default: 'Status')}</th>
            <th>${message(code: 'course.select.label', default: 'Select')}</th>
        </tr>
    </thead>
    <tbody>
    <g:each in="${courseInstanceList}" status="i" var="courseInstance">
        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">

            <td class="delete"><g:remoteLink action="delete" update="courseContent" id="${courseInstance.id}"><span class="ui-icon ui-icon-trash"/></g:remoteLink></td>
            <td class="edit"><a href="#" title="Edit Course" rel="${request.contextPath}/course/edit/${courseInstance.id}"><span class="ui-icon ui-icon-pencil"/></a></td>
            <td class="show"><a href="#" title="Course Detail" rel="${request.contextPath}/course/show/${courseInstance.id}">${fieldValue(bean: courseInstance, field: "name")}</a></td>
            <td>${fieldValue(bean: courseInstance, field: "grade")}</td>
            <td>${fieldValue(bean: courseInstance, field: "capacity")}</td>
            <td>${fieldValue(bean: courseInstance, field: "regCapacity")}</td>
            <td>${fieldValue(bean: courseInstance, field: "price")}</td>
            <td>${fieldValue(bean: courseInstance, field: "startTime")}</td>
            <td>${fieldValue(bean: courseInstance, field: "endTime")}</td>
            <td>${fieldValue(bean: courseInstance, field: "teacher")}</td>
            <td class="show"><a href="#" title="Book Detail" rel="${request.contextPath}/book/show/${courseInstance.book.id}">${fieldValue(bean: courseInstance, field: "book")}</a></td>
            <td>${fieldValue(bean: courseInstance, field: "classRoom")}</td>
            <td>${fieldValue(bean: courseInstance, field: "semester")}</td>
            <td>${fieldValue(bean: courseInstance, field: "year")}</td>
            <td>${fieldValue(bean: courseInstance, field: "status")}</td>
            <td><g:checkBox name="${'courseName'+courseInstance.id}"  /></td>
        </tr>
    </g:each>
    </tbody>
</table>
           <g:submitToRemote update="center" action="registerAll" value="Register" />
</g:form>
<script type="text/javascript">
  $(function(){
      $("#courseTable").tablesorter( {
        headers: {
          0: { sorter: false },
          1: { sorter: false }
        }
      });

      if ($.isAdmin()) {
        $('.delete, .edit').show();
      }

      $("#courseTable .show > a").cluetip({activation:'click', sticky:true, closePosition:'title'});
      $("#courseTable .edit > a").cluetip({activation:'click', sticky:true, closePosition:'title'});
  });
</script>
